<template>
  <div class="contextmenu" v-show="menuShow"
       :style="{ top: menuTop + 'px', left: menuLeft + 'px',transform:'scale('+scale+')' }">
    <ul>
      <li @click="handleMoveTop">
        <i class="iconfont icon-shangyi1"></i>置顶
      </li>
      <li @click="handleMoveBottom">
        <i class="iconfont icon-xiayi1"></i>置底
      </li>
      <li @click="handleMoveUp">
        <i class="iconfont icon-shangyi"></i>上移
      </li>
      <li @click="handleMoveDown">
        <i class="iconfont icon-xiayi"></i>下移
      </li>
      <li class="line"></li>
      <li @click="handleLockComp">
        <template v-if="!lockFlag">
          <i class="iconfont icon-suo"></i>锁定
        </template>
        <template v-else>
          <i class="iconfont icon-jiesuo"></i>解锁
        </template>
      </li>
      <li @click="handleHiddenComp">
        <template v-if="!hiddenFlag">
          <i class="iconfont icon-biyan"></i>隐藏
        </template>
        <template v-else>
          <i class="iconfont icon-yanjing-zhengyan"></i>展示
        </template>
      </li>
      <li class="line"></li>
      <li @click="handleEditCompName" v-if="editName">
        <i class="iconfont icon-edit"></i>重命名
      </li>
      <li @click="handleCopyComp">
        <i class="iconfont icon-copy_project"></i>复制
      </li>
      <li @click="handleDelComp">
        <i class="iconfont icon-shanchu1"></i>删除
      </li>
    </ul>
  </div>
</template>

<script>
import { computed, defineComponent } from "vue";
import { useStore } from "vuex";
import { ElMessageBox } from "element-plus";

export default defineComponent({
  name: "ContextMenu",
  props: {
    menuShow: {
      type: Boolean,
      default: false
    },
    menuTop: {
      type: Number,
      default: 0
    },
    menuLeft: {
      type: Number,
      default: 0
    },
    scale: {
      type: Number,
      default: 1
    },
    editName: {
      type: Boolean,
      default: true,
    }
  },
  emits: ["hideMenu", "editName"],
  setup(props, ctx) {
    const store = useStore();
    const selectComp = computed(() => store.getters["design/selectedComp"]);
    const handleMoveUp = (e) => {
      e.stopPropagation();
      e.preventDefault();
      ctx.emit("hideMenu");
      if (selectComp.value) {
        store.commit("design/moveComp", { id: selectComp.value.id, moveType: "up" });
      }
    };
    const lockFlag = computed(() => {
      if (selectComp.value) {
        return !!selectComp.value.locked ? true : false;
      } else {
        return false;
      }
    });

    const hiddenFlag = computed(() => {
      if (selectComp.value) {
        return !!selectComp.value.hidden ? true : false;
      } else {
        return false;
      }
    });
    const handleMoveDown = (e) => {
      e.stopPropagation();
      e.preventDefault();
      ctx.emit("hideMenu");
      if (selectComp.value) {
        store.commit("design/moveComp", { id: selectComp.value.id, moveType: "down" });
      }
    };

    const handleMoveBottom = (e) => {
      e.stopPropagation();
      e.preventDefault();
      ctx.emit("hideMenu");
      if (selectComp.value) {
        store.commit("design/moveComp", { id: selectComp.value.id, moveType: "bottom" });
      }
    };

    const handleMoveTop = (e) => {
      e.stopPropagation();
      e.preventDefault();
      ctx.emit("hideMenu");
      if (selectComp.value) {
        store.commit("design/moveComp", { id: selectComp.value.id, moveType: "top" });
      }
    };

    const handleDelComp = (e) => {
      e.stopPropagation();
      e.preventDefault();
      ctx.emit("hideMenu");
      ElMessageBox.confirm(
          `你确定删除当前组件？`,
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      ).then(() => {
        store.commit("design/DELETE_COMP", selectComp.value);
      });
    };
    const handleLockComp = (e) => {
      e.stopPropagation();
      e.preventDefault();
      ctx.emit("hideMenu");
      if (selectComp.value) {
        selectComp.value.locked = !selectComp.value.locked;
      }
    };
    const handleHiddenComp = (e) => {
      e.stopPropagation();
      e.preventDefault();
      ctx.emit("hideMenu");
      if (selectComp.value) {
        selectComp.value.hidden = !selectComp.value.hidden;
      }
    };
    const handleEditCompName = (e) => {
      e.stopPropagation();
      e.preventDefault();
      ctx.emit("hideMenu");
      if (selectComp.value) {
        ctx.emit("editName");
      }
    };

    const handleCopyComp = (e) => {
      e.stopPropagation();
      e.preventDefault();
      ctx.emit("hideMenu");
      if (selectComp.value) {
        store.commit("design/COPY_COMP", selectComp.value.id);
      }
    };
    return {
      selectComp,
      lockFlag,
      hiddenFlag,
      handleHiddenComp,
      handleLockComp,
      handleMoveBottom,
      handleMoveUp,
      handleMoveDown,
      handleMoveTop,
      handleEditCompName,
      handleCopyComp,
      handleDelComp,
    };
  }
});
</script>
<style lang="less">
.contextmenu {
  position: absolute;
  z-index: 1000;
  transform-origin: 0 0;


  ul {
    color: #bcc9d4;
    background: #27343e;
    user-select: none;
    border: 1px solid #27343e;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    box-sizing: border-box;
    margin: 5px 0;
    padding: 6px 0;

    li {
      font-size: 12px;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
      cursor: pointer;
      height: 28px;
      padding: 0 3em 0 6px;
      line-height: 28px;
      border-left: 2px solid transparent;

      & > i {
        margin-right: 4px;
        font-size: 14px;
      }

      &:hover {
        color: #00baff;
        background-color: #1d262e;
        border-left: 2px solid #00baff;
      }
    }

    .line {
      margin: 0px;
      padding: 0px;
      font-size: 0px;
      height: 1px;
      overflow: hidden;
      background: #3a4659;
    }
  }
}
</style>
